<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>咪咕视频""电视剧" 22001010528 王雪伊</title>
    <link rel="stylesheet" href="wang_css/dianshiju.css">
    <link rel="stylesheet" href="./wang_css/swiper-bundle.min.css">
    <script src="./wang_fonts/iconfont.js"></script>
</head>
<body>
    <body>
        <header class="wang_header">
            <nav>
                <ul class="wang_header1">
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-G"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <form action="" method="post">
                            <p>
                                <input placeholder="异形：夺命舰">
                            </p>
                        </form>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wodehongbao"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shizhong"></use>
                            </svg>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduo"></use>
                            </svg>
                        </a>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="wang_header2">
                    <li class="nav-tab"><a href="#guanzhu" class="nav-link">关注</a></li>
                    <li class="nav-tab"><a href="#jingxuan" class="nav-link">精选</a></li>
                    <li class="nav-tab"><a href="#alien" class="nav-link">异形</a></li>
                    <li class="nav-tab"><a href="#tv" class="nav-link">电视剧</a></li>
                    <li class="nav-tab"><a href="#movie" class="nav-link">电影</a></li>
                    <li class="nav-tab"><a href="#variety" class="nav-link">综艺</a></li>
                </ul>
            </nav>
        </header>
        <nav class="wang_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-migushipin"></use>
                        </svg>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="./tiyu.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tiyu"></use>
                        </svg>
                        <p>体育</p>
                    </a>
                </li>
                <li>
                    <a href="./vip.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-VIP2"></use>
                        </svg>
                        <p>VIP</p>
                    </a>
                </li>
                <li>
                    <a href="./duanshipin.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yishu_duanshipin"></use>
                        </svg>
                        <p>短视频</p>
                    </a>
                </li>
                <li>
                    <a href="./wode.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
        <footer class="wang_footer">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"><img src="wang_img/电视剧1.png" ><div class="txt">血迷宫：东北硬汉黄景瑜又服兵役</div></div>
                  <div class="swiper-slide"><img src="wang_img/电视剧2.png" ><div class="txt">小巷人家：闫妮蒋欣重返80年代</div></div>
                  <div class="swiper-slide"><img src="wang_img/电视剧3.png" ><div class="txt">白日梦：庄达菲叫周翊然小甜甜</div></div>
                </div>
              <script src="./wang_js/swiper-bundle.min.js"></script>
              </footer>
              <main class="wang_main">
                <div class="container">
                <!-- 第一个图标和文字 -->
                <div class="item">
                    <img src="wang_img/aa.png">
                    <p>全部电视剧</p>
                </div>
                <!-- 第二个图标和文字 -->
                <div class="item">
                    <img src="wang_img/bb.png">
                    <p>好运家</p>
                </div>
                <!-- 第三个图标和文字 -->
                <div class="item">
                    <img src="wang_img/cc.png">
                    <p>悬疑剧场</p>
                </div>
                <!-- 第四个图标和文字 -->
                <div class="item">
                    <img src="wang_img/dd.png">
                    <p>她剧场</p>
                </div>
                <!-- 第五个图标和文字 -->
                <div class="item">
                    <img src="wang_img/ee.png">
                    <p>疯狂薅羊毛</p>
                </div>
            </div>
        </main> 

</body>
<!-- json解析 -->
<ul class="wang_list"></ul>
    <script>
        const url=`http://rap2api.taobao.org/app/mock/321624/tv`
        const wang_list=document.querySelector('.wang_list');
        fetch(url)
        .then(response => response.json())
       .then(data => {
           const newsList = data;
           newsList.forEach(news => {
               const li = document.createElement('li');
               li.innerHTML = `
                   <a href="${news.link}">
                       <img src="${news.image}" alt="${news.title}">
                       <p>${news.title}</p>
                       <div class="content">${news.content}</div>  
                   </a>
               `;
               wang_list.appendChild(li);
           });
       })
      .catch(error => console.error('Error fetching data:', error)); // 添加错误处理
  </script>
</body>
<!-- javascript效果 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var navTabs = document.querySelectorAll('.wang_header2 .nav-tab');

        navTabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                // 移除所有 li 上的 active-nav 类
                navTabs.forEach(function(otherTab) {
                    otherTab.classList.remove('active-nav');
                });
                // 为当前点击的 li 添加 active-nav 类
                this.classList.add('active-nav');
            });
        });
    });
</script>
<!-- JavaScript效果 -->
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },

      pagination: {
                el: ".swiper-pagination",
         clickable: true,
      },
    });
  </script>

</body>
</script>
</html>
</html>
    </script>
</html>
<!-- [
  {
    "image": "./wang_img/a.png",
    "link": "https://example.com/news1",
    "title": "上甘岭",
    "content": "黄轩：为了新中国向我开炮"
  },
  {
    "image": "./wang_img/b.png",
    "link": "https://example.com/news2",
    "title": "小巷人家",
    "content": "关晓彤王安宇纯爱组超好磕"
  },
  {
    "image": "./wang_img/c.png",
    "link": "https://example.com/news3",
    "title": "故乡的泥土",
    "content": "小伙逆袭成地产大亨重返家乡"
  },
  {
    "image": "./wang_img/d.png",
    "link": "https://example.com/news4",
    "title": "春华秋实",
    "content": "胡可扎根农村再现青岁月"
  },
    {
    "image": "./wang_img/e.png",
    "link": "https://example.com/news",
    "title": "装台",
    "content": "闫妮张嘉益中年夫妻欢乐多"
  },
    {
    "image": "./wang_img/f.png",
    "link": "https://example.com/news",
    "title": "超能使者",
    "content": "陈展鹏异能觉醒大战恶势力"
  }
] -->